<!DOCTYPE html>
<meta charset="utf-8">
<title>IFrame fullscreenEnabled attribute reporter</title>
<body>
<video controls width="320" height="240"></video>
<script>
runWithKeyDown = (fn) => {
  var thunk = () => {
    document.removeEventListener("keypress", thunk, false);
    fn();
  }
  document.addEventListener("keypress", thunk, false);

  if (window.eventSender) {
    focus();
    eventSender.keyDown(" ", []);
  }
}

runTest = (frameName, videoSrc) => {
  var video = document.querySelector("video");

  document.addEventListener("webkitfullscreenerror", () => {
    reportWebkitDisplayingFullscreen(frameName, false,
      video.webkitDisplayingFullscreen);
  });

  document.addEventListener("webkitfullscreenchange", () => {
    reportWebkitDisplayingFullscreen(frameName, true,
      video.webkitDisplayingFullscreen);
  });

  video.src = videoSrc;
  video.addEventListener("canplaythrough", () => {
    runWithKeyDown(function() {
      video.webkitEnterFullScreen();
    });
  });
}

reportWebkitDisplayingFullscreen = (frame, enabled, displayingFullscreen) => {
  parent.postMessage({"report": {
    "api": "fullscreen",
    "enabled": [enabled, displayingFullscreen],
    "frame": frame
  }}, "*");
}

window.addEventListener('message', (e) => {
  if (e.data.action == "report")
    runTest(e.data.frame, e.data.videoSrc);
});
</script>
